<template>
    <div class="goodsshow">
        <div class="mui-card">
            <div class="mui-card-header title">
                <mt-navbar v-model="selected">
                    <mt-tab-item id="1">商品详情</mt-tab-item>
                    <mt-tab-item id="2">商品参数</mt-tab-item>
                    <mt-tab-item id="3">商品评价</mt-tab-item>
                </mt-navbar>
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-tab-container v-model="selected">
                        <mt-tab-container-item id="1">
                            <div class="detail">
                                <h4>{{goodsdesc.title}}</h4>
                                <p class="content" v-html="goodsdesc.content"></p>
                            </div>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="2">
                            <mt-cell  :title="'商品货号：'+goodsinfo.goods_no " />
                            <mt-cell  :title="'库存情况：' +goodsinfo.stock_quantity " />
                            <mt-cell  title='发布时间：'>{{goodsinfo.add_time |dateFormat}}</mt-cell>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="3">
                            <comment :artid="goodsinfo.id"></comment>
                        </mt-tab-container-item>
                    </mt-tab-container>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import comment from '../../components/comment'
    export default {
        name: "goodsshow",
        data(){
            return{
                selected:'1'
            }
        },
        props:['goodsinfo','goodsdesc'],
        components:{
            comment
        }

    }
</script>

<style scoped lang="scss">
    .goodsshow{
        padding-bottom: 55px;
        .title{

            ::v-deep .mint-navbar{
                display: flex;
                justify-content: space-around;
                width:100%;
            }
        }
        .mui-card-content-inner{
            padding: 0;
        }
        ::v-deep .mint-cell-title{
           flex: none;
        }
        ::v-deep .mint-cell-value{
            color: black;
        }
        .detail{
            h4{
                color: #007aff;
                font-size: 14px;
                text-align: center;
                margin: 15px 0;
            }
            .content{
                ::v-deep p{
                    text-indent: 24px;
                    margin: 0;
                    img{
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                    }
                }
                ::v-deep td{
                    width: 100%;
                    text-indent: 24px;
                    margin: 0;
                    img{
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                    }
                }

            }
        }
    }

</style>
